<template>
  <div class="card content-box">
    <span class="text">资讯管理</span>

    <el-select v-model="col" placeholder="选择栏目" size="large" style="width: 240px">
      <el-option v-for="item in colList" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" />
    </el-select>
    <el-button type="success" @click="addClick" style="margin-left: -90%">添加资讯</el-button>
    <!--展示资讯列表-->
    <el-table :data="newsList" style="width: 100%">
      <el-table-column label="序号" width="100" type="index"> </el-table-column>
      <el-table-column label="资讯编号" prop="newsId"></el-table-column>
      <el-table-column label="标题" prop="newsTitle"></el-table-column>
      <el-table-column label="时间" prop="newsDate"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button type="primary" @click="show(row)" :icon="Search" circle></el-button>
          <el-button type="danger" @click="del(row)" :icon="Delete" circle />
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="空空如也" />
      </template>
    </el-table>
  </div>

  <!-- 添加弹窗 -->
  <el-dialog v-model="show_add" width="40%">
    <el-form :model="form" label-width="130px" style="padding-right: 30px">
      <el-form-item label="资讯标题">
        <el-input v-model="form.newsTitle"></el-input>
      </el-form-item>
      <el-form-item label="资讯内容">
        <el-input v-model="form.newsContent"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show_add = false">取消</el-button>
        <el-button type="primary" @click="add"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改弹窗 -->
  <el-dialog v-model="show_edit" width="40%">
    <el-form :model="form" label-width="130px" style="padding-right: 30px">
      <el-form-item label="资讯标题">
        <el-input v-model="form.newsTitle"></el-input>
      </el-form-item>
      <el-form-item label="资讯内容">
        <el-input v-model="form.newsContent"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show_edit = false">取消</el-button>
        <el-button type="primary" @click="edit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="timingTask">
import { onMounted, ref, watch } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { getAllNewsService, addNewsService, delNewsService, editNewsService } from "@/api/backoffice/news";
import { getAllColService } from "@/api/backoffice/column";

const colList = ref([
  {
    categoryId: "",
    categoryName: "",
    description: ""
  }
]);

//相关操作接口
const getList = async () => {
  let result = await getAllColService();
  colList.value = result.data;
};

//加载自动调用
getList();
onMounted(getList);

//控制量
const show_edit = ref(false);
const show_add = ref(false);
const col = ref("");

const newsList = ref([
  {
    newsTitle: "",
    newsContent: "",
    newsDate: "",
    newsId: 0
  }
]);

const form = ref({
  newsTitle: "",
  newsContent: "",
  newsId: 0
});

const clear = () => {
  form.value = {
    newsTitle: "",
    newsContent: "",
    newsId: 0
  };
};

const getNewsList = async () => {
  let result = await getAllNewsService(col.value);
  newsList.value = result.data;
};

watch(col, getNewsList);

const addClick = () => {
  clear();
  show_add.value = true;
};

const add = async () => {
  let Data = {
    categoryId: col.value,
    newsTitle: form.value.newsTitle,
    newsContent: form.value.newsContent
  };
  await addNewsService(Data);
  ElMessage.success("操作成功");
  show_add.value = false;
};

const show = row => {
  form.value = row;
  show_edit.value = true;
};

const edit = async () => {
  let Data = {
    categroyID: col.value,
    newsID: form.value.newsId,
    newsTitle: form.value.newsTitle,
    newsContent: form.value.newsContent
  };
  await editNewsService(Data);
  show_edit.value = false;
};

const del = async row => {
  let Data = {
    categoryID: col.value,
    newsID: row.newsID
  };
  await delNewsService(Data);
};
</script>
